<template>
  <!-- 任务版块 -->
  <div class="taskComponent common-right-svg-icon">
    <div class="dgg-order-search">
      <div class="search-box">
        <dgg-input
          v-model="searchKey"
          style="width:270px;"
          class="search-input"
          placeholder="请输入关键词搜索"
          :maxlength="30"
          onkeyup="if(value.length>30)value=value.slice(0,30)"
          @input="selectStageTask(searchKey)"
          @clear="
            chooseStateId = '';
            chooseTaskListId = '';
            commonStageListService();
          "
          clearable
        >
          <dgg-icon slot="prefix" icon-class="dgg-search" />
        </dgg-input>
      </div>
      <ul
        class="admin-select-keywords"
        v-if="stageTaskListData.length > 0"
        v-Clickoutside="stageClickoutSide"
      >
        <li
          v-for="(item, index) in stageTaskListData"
          :key="index"
          @click="chooseStageTaskId(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="dgg-task-warp" v-if="queryTemplateView">
      <!-- 判断退单或者已完结添加class hidden-add-stage -->
      <div
        :class="[
          'dgg-stage',
          {
            'hidden-dgg-stage': !(
              !getOrderStatusSealName() && $route.name == 'transactionTask'
            )
          }
        ]"
      >
        <div class="stage-content">
          <ul class="stage-lists" v-if="allStageLists.length > 0">
            <li
              v-for="(item, index) in allStageLists"
              :key="index"
              class="current-stage"
              :class="{
                chooseIdActive: item.stageId == chooseStateId,
                chooseIdFocusActive: item.isEdit == 1
              }"
            >
              <div v-if="item.isEdit == 0" class="detail">
                <p @click.stop="changeTaskListsData(item)">
                  <span>
                    <dgg-tooltip
                      :value="showTips"
                      :popper-options="popperOptions"
                      class="msg-dot"
                      placement="top"
                      effect="dark"
                      :content="item.stageName"
                      :disabled="item.stageName.length <= 6"
                    >
                      <span>{{ item.stageName }}</span>
                    </dgg-tooltip>
                    <label style="color:#9398A1;"
                      >&nbsp; {{ item.tasksCompletedStemp }}/{{
                        item.tasksCompleted
                      }}</label
                    >
                  </span>
                </p>
                <div
                  class="dgg-task-btn"
                  v-if="
                    item.isUnphased !== 1 &&
                      !getOrderStatusSealName() &&
                      $route.name == 'transactionTask'
                  "
                >
                  <span>
                    <dgg-tooltip
                      :value="showTips"
                      :popper-options="popperOptions"
                      class="msg-dot "
                      placement="top"
                      effect="dark"
                      content="编辑"
                    >
                      <dgg-icon
                        icon-class="icon_edit"
                        svg-width="16px"
                        svg-height="16px"
                        @click="showStageName(item, index)"
                      />
                    </dgg-tooltip>
                    <dgg-tooltip
                      :value="showTips"
                      :popper-options="popperOptions"
                      class="msg-dot ml-20"
                      effect="dark"
                      placement="top"
                      content="删除"
                    >
                      <dgg-icon
                        icon-class="icon_delete"
                        svg-width="16px"
                        svg-height="16px"
                        @click="deletePhoaseService(item.stageId)"
                      />
                    </dgg-tooltip>
                  </span>
                </div>
              </div>
              <div v-if="item.isEdit != 0" class="detail-isedit">
                <dgg-input
                  :maxlength="30"
                  onkeyup="if(value.length>30)value=value.slice(0,30)"
                  v-model="item.stageName"
                  style="width:183px;"
                  :ref="'autofocus' + index"
                  @blur="changeStageName(item)"
                  @keyup.enter.native="$event.target.blur"
                />
              </div>
            </li>
          </ul>
          <!-- 无阶段占位图 -->
          <taskBitMap
            v-if="allStageLists.length < 1"
            synopsis="暂无阶段"
            svg-class="icon_nostage"
            svg-width="58px"
            svg-height="41px"
          />
        </div>
        <div
          class="add-stage"
          v-if="
            !getOrderStatusSealName() &&
              $route.name == 'transactionTask' &&
              1 < 0
          "
        >
          <dgg-input
            v-if="toPhaseName"
            v-model="phaseName"
            placeholder="请输入阶段名称"
            size="small"
            class="add-stage-input"
            ref="addStageInput"
            :maxlength="30"
            oninput="this.value=this.value.replace(/\s/g,'')"
            onkeyup="if(value.length>30)value=value.slice(0,30)"
            @blur="addStagename(phaseName)"
            @keyup.enter.native="$event.target.blur"
          />
          <dgg-button
            v-else
            dgg-icon="detail_icon_plus"
            class="brabBill-button"
            :disabled="!transactionItem.currentUserOperationOrderPermissions"
            @click="addPhaseName"
            >添加阶段
          </dgg-button>
        </div>
      </div>

      <!-- 判断退单或者已完结添加class hidden-dgg-task -->
      <div
        :class="[
          'dgg-task',
          {
            'hidden-dgg-task': !(
              !getOrderStatusSealName() && $route.name == 'transactionTask'
            )
          }
        ]"
      >
        <div class="task-content">
          <dgg-row class="task-lists" v-if="taskListsData.length > 0">
            <dgg-col
              :span="24"
              class="current-list"
              :class="{ taskIdActive: taskItem.taskId == chooseTaskListId }"
              v-for="(taskItem, taskIndex) in taskListsData"
              :key="taskIndex"
            >
              <div class="content">
                <div class="top-title">
                  <div class="list-group">
                    <dgg-tooltip
                      :value="showTips"
                      :popper-options="popperOptions"
                      :content="
                        taskItem.taskSwitching == 1 ? '激活任务' : '完成任务'
                      "
                      placement="top"
                      class="msg-dot"
                      effect="dark"
                      :disabled="isClickCheckStatus(taskItem)"
                    >
                      <dgg-checkbox
                        class="list-checkbox"
                        v-model="taskItem.taskSwitching == 1"
                        :checked="taskItem.taskSwitching == 1"
                        @change="stateChange(taskItem)"
                        :disabled="isClickCheckStatus(taskItem)"
                      />
                    </dgg-tooltip>
                    <div
                      class="list-title"
                      @click="selectDetailData(taskItem.taskId)"
                    >
                      <dgg-tag
                        class="due-tag"
                        v-if="
                          !(taskItem.taskSwitching == 1) &&
                            taskItem.aboutExpire == 1
                        "
                        >即将到期</dgg-tag
                      >
                      <dgg-tag
                        class="overdue-tag"
                        v-if="
                          !(taskItem.taskSwitching == 1) &&
                            taskItem.taskOverTime == 1
                        "
                        >已超期</dgg-tag
                      >
                      <h6 :class="{ deleteLine: taskItem.taskSwitching == 1 }">
                        {{ taskItem.taskName }}
                      </h6>

                      <dgg-tooltip
                        :value="showTips"
                        :popper-options="popperOptions"
                        placement="top"
                        class="msg-dot ml-20"
                        effect="dark"
                        content="关键任务"
                        v-if="taskItem.isKeyTask == 1"
                      >
                        <dgg-icon
                          icon-class="icon_star"
                          svg-width="14px"
                          svg-height="14px"
                        />
                      </dgg-tooltip>
                    </div>
                  </div>
                  <!-- isCheck//是否质检任务 0否 1是 是质检才显示 -->
                  <p
                    class="list-des"
                    v-if="taskItem.isCheck == 1 && taskItem.taskSwitching == 1"
                  >
                    状态：{{
                      storeQalNspectionsStatus[taskItem.qalNspectionsStatus]
                    }}
                  </p>
                </div>

                <dgg-tooltip
                  :value="showTips"
                  :popper-options="popperOptions"
                  :content="taskItem.taskManager"
                  placement="top"
                  class="msg-dot ml-20"
                  effect="dark"
                  v-if="taskItem.addressHandlerPicture"
                >
                  <img
                    :src="taskItem.addressHandlerPicture"
                    alt=""
                    :onerror="errorDefaultImg"
                    class="headimg"
                  />
                </dgg-tooltip>
              </div>
            </dgg-col>
          </dgg-row>
          <!-- 暂无任务 -->
          <taskBitMap
            v-if="taskListsData.length < 1"
            :show-btn="false"
            synopsis="暂无任务"
            btn-name="暂无阶段"
          />
        </div>
        <div
          class="add-stage"
          v-if="
            !getOrderStatusSealName() &&
              $route.name == 'transactionTask' &&
              1 < 0
          "
        >
          <dgg-input
            v-if="toTaskName"
            v-model="taskName"
            placeholder="请输入任务名称"
            size="small"
            class="add-stage-input"
            ref="addTaskInput"
            :maxlength="30"
            oninput="this.value=this.value.replace(/\s/g,'')"
            onkeyup="if(value.length>30)value=value.slice(0,30)"
            @blur="addTaskNameFn(taskName)"
            @keyup.enter.native="$event.target.blur"
          />
          <dgg-button
            dgg-icon="detail_icon_plus"
            class="brabBill-button"
            :disabled="!transactionItem.currentUserOperationOrderPermissions"
            @click="addTaskName"
          >
            添加任务
          </dgg-button>
        </div>
      </div>
      <div class="dgg-details">
        <div
          class="detail-content"
          v-if="Object.keys(taskDetailData).length > 0"
          v-infinite-scroll="dropdownDetailQueryInventory"
          :infinite-scroll-disabled="queryinfiniteScrollFalg"
        >
          <div class="user-info">
            <div class="name">
              <template>
                <h6 v-if="!showEditDetailTaskNameView">
                  {{ taskDetailData.taskName }}
                </h6>
                <dgg-input
                  v-else
                  v-model="taskDetailData.taskName"
                  placeholder="请输入任务名称"
                  size="small"
                  class="edit-detail-task-name"
                  ref="editDetailTaskName"
                  :maxlength="30"
                  oninput="this.value=this.value.replace(/\s/g,'')"
                  onkeyup="if(value.length>30)value=value.slice(0,30)"
                  @blur="taskNameEditor(taskDetailData)"
                  style="width:220px;"
                />
              </template>
              <!-- 是否自己添加0否 1是 为1才可以操作 -->
              <span v-if="taskDetailData.addTaskOrNot == 1">
                <dgg-tooltip
                  :value="showTips"
                  :popper-options="popperOptions"
                  content="编辑"
                  placement="top"
                  class="msg-dot"
                  effect="dark"
                >
                  <dgg-icon
                    icon-class="icon_edit"
                    svg-width="16px"
                    class="taskBtn"
                    svg-height="16px"
                    @click="befroreEditTaskName"
                  />
                </dgg-tooltip>
                <dgg-tooltip
                  :value="showTips"
                  :popper-options="popperOptions"
                  content="删除"
                  placement="top"
                  class="msg-dot"
                  effect="dark"
                >
                  <dgg-icon
                    icon-class="icon_delete"
                    svg-width="16px"
                    svg-height="16px"
                    class="taskBtn"
                    @click="detailTaskService(taskDetailData)"
                  />
                </dgg-tooltip>
              </span>
            </div>
            <div class="date">
              <p>
                完成人:{{
                  taskDetailData.completionPerson
                    ? taskDetailData.completionPerson
                    : "--"
                }}
              </p>
              <span
                >完成时间:{{
                  taskDetailData.completionTime
                    ? taskDetailData.completionTime
                    : "--"
                }}</span
              >
            </div>
          </div>
          <div class="transactor transactor-people">
            <dgg-icon
              icon-class="icon_transactor"
              svg-width="16px"
              svg-height="16px"
            />
            <span class="transactor-type">办理人</span>

            <span
              class="show-transactor-people"
              v-if="taskDetailData.taskManager"
            >
              <img
                :src="
                  taskDetailData.addressHandlerPicture
                    ? taskDetailData.addressHandlerPicture
                    : taskTransactorImg
                "
                alt=""
                :onerror="errorDefaultImg"
              />
              <dgg-icon
                icon-class="dgg_delete"
                svgWidth="14px"
                svgHeight="14px"
                @click="deleteTransacTorPeople"
                v-if="
                  !isClickCheckStatus(taskDetailData) &&
                    transactionItem.currentUserOperationOrderPermissions
                "
              />
            </span>
            <dgg-icon
              icon-class="dgg_add"
              svg-width="18px"
              svg-height="18px"
              class="addTransactor"
              :class="{ 'dgg-not-allowed': isClickCheckStatus(taskDetailData) }"
              v-if="!taskDetailData.taskManager"
              @click="
                !isClickCheckStatus(taskDetailData) &&
                  transactionItem.currentUserOperationOrderPermissions &&
                  addTransactor($event)
              "
            />
            <!-- 办理人选择框 start -->
            <transactorProp
              :up-all-pop="toTransactor"
              :top="'36px'"
              :left="'50%'"
              :tab-names="tabNames"
              :count="transactorData"
              :currentTab="storeFlagUser"
              :chooseStoreId="thisCheckedStoreId"
              :thisStoreRealName="thisStoreRealName"
              :thisStorePhone="thisStorePhone"
              @Clickoutside="closeStoreProp"
              @changeStoreFlagUser="changeStoreFlagUser"
              @storeKeyWordsFn="storeKeyWordsFn"
              @clearNamePhone="clearNamePhone"
              @chooseStoreDataFn="chooseStoreDataFn"
              @load="load"
            />
          </div>

          <div class="transactor ">
            <dgg-icon
              icon-class="icon_deadline"
              svg-width="16px"
              svg-height="16px"
            />
            <span class="transactor-type">截止时间</span>
            <dgg-picker
              v-model="taskDetailData.deadLine"
              dateType="datetime"
              placeholder="设置截止时间"
              :pickerOptions="expireTimeOption(taskDetailData.receiveTime)"
              default-time="12:00:00"
              :disabled="isClickCheckStatus(taskDetailData)"
              @change="taskChangeDeadlineTime"
              format="yyyy-MM-dd HH:mm:ss"
              :editable="false"
              size="small"
              style="width:160px;"
              class="chage-deadline-time"
            />
            <!-- <span class="end-time">{{taskDetailData.deadLine?taskDetailData.deadLine:'--'}}</span> -->
          </div>
          <div class="transactor">
            <dgg-icon
              icon-class="icon_remind"
              svg-width="16px"
              svg-height="16px"
            />
            <span class="transactor-type">提醒</span>
            <dgg-button
              :dgg-icon="
                isClickCheckStatus(taskDetailData) ? 'dgg-plus' : 'icon_plus2'
              "
              class="brabBill-button brabBill-button2"
              @click="showAddRemind = !showAddRemind"
              :disabled="isClickCheckStatus(taskDetailData)"
              >添加
            </dgg-button>
          </div>

          <!-- 添加提醒 start -->
          <template v-if="taskDetailData.taskChangeRecordVoList.length > 0">
            <div
              v-for="(item, index) in taskDetailData.taskChangeRecordVoList"
              :key="index"
              class="transactor transactor-remind"
            >
              <dgg-form class="remind-form">
                <dgg-row :gutter="10">
                  <dgg-col :span="12">
                    <dgg-select v-model="item.reminderCondition" disabled>
                      <dgg-option
                        :label="item.reminderCondition"
                        :value="item.reminderCondition"
                      />
                    </dgg-select>
                  </dgg-col>
                  <dgg-col :span="12">
                    <dgg-select
                      v-model="item.reminderValue"
                      @change="changeRemidItem(item)"
                      :disabled="isClickCheckStatus(taskDetailData)"
                    >
                      <dgg-option
                        :label="timeItem.name"
                        :value="timeItem.name"
                        v-for="(timeItem, timeIndex) in allRemindTimesData"
                        :key="timeIndex"
                        :disabled="timeItem.name == item.reminderValue"
                      />
                    </dgg-select>
                  </dgg-col>
                </dgg-row>
              </dgg-form>
              <dgg-icon
                icon-class="dgg_delete"
                svg-width="16px"
                svg-height="16px"
                class="remindDelete"
                @click="remindDelete(item)"
                v-if="!isClickCheckStatus(taskDetailData)"
              />
            </div>
          </template>
          <!-- 添加提醒的选择框 -->
          <div class="transactor transactor-remind" v-if="showAddRemind">
            <dgg-form class="remind-form">
              <dgg-row :gutter="10">
                <dgg-col :span="12">
                  <dgg-select v-model="defulutTimeKey" disabled>
                    <dgg-option
                      :label="defulutTimeKey"
                      :value="defulutTimeKey"
                    />
                  </dgg-select>
                </dgg-col>
                <dgg-col :span="12">
                  <dgg-select v-model="addReminderTime" @change="addRemidItem">
                    <dgg-option
                      :label="timeItem.name"
                      :value="timeItem.name"
                      v-for="(timeItem, timeIndex) in allRemindTimesData"
                      :key="timeIndex"
                      :disabled="
                        choosedTimeReminderTime.includes(timeItem.name)
                      "
                    />
                  </dgg-select>
                </dgg-col>
              </dgg-row>
            </dgg-form>
          </div>

          <div class="transactor " v-if="taskDetailData">
            <dgg-icon
              icon-class="icon_explain"
              svg-width="16px"
              svg-height="16px"
            />
            <span class="transactor-type task-misson-statement">任务说明 </span>
            <dgg-button
              dgg-icon="icon_edit1"
              class="brabBill-button  brabBill-button2"
              @click="showTaskMissonContentView(taskDetailData.missonStatement)"
              :disabled="isClickCheckStatus(taskDetailData)"
              >编辑
            </dgg-button>
          </div>
          <!-- 编辑任务说明 -->
          <div
            class="add-transactor add-task-misson"
            v-if="showTaskMissonContent"
          >
            <dgg-input
              v-model="taskMissonContent"
              type="textarea"
              class="remarksTextArea"
              placeholder="请输入任务描述"
              :autosize="{ minRows: 2, maxRows: 15 }"
              maxlength="1000"
              ref="editTaskMissonContentVal"
              oninput="if(value.length>1000)value=value.slice(0,1000)"
              @keyup.enter.native="$event.target.blur"
              @blur="addtaskKewordsVal(taskMissonContent)"
            />
          </div>
          <div
            class="task-explain-text"
            v-if="taskDetailData.missonStatement && !showTaskMissonContent"
          >
            <div
              :style="{ 'max-height': taskExplainHeight }"
              class="explain-content"
              v-text="
                taskDetailData.missonStatement
                  ? taskDetailData.missonStatement
                  : ''
              "
            />
            <dgg-button
              :dgg-icon="iconType"
              el-icon--right
              v-if="GetLength(taskDetailData.missonStatement) > 140"
              class="brabBill-button"
              @click="changeTaskExplainHight"
              >{{ btnName }}
            </dgg-button>
          </div>

          <div class="transactor ">
            <dgg-icon
              icon-class="icon_enclosure"
              svg-width="16px"
              svg-height="16px"
            />
            <span class="transactor-type">附件</span>
            <dgg-button
              :dgg-icon="
                isClickCheckStatus(taskDetailData) ? 'dgg-plus' : 'icon_plus2'
              "
              class="brabBill-button  brabBill-button2"
              @click="docModal = true"
              :disabled="isClickCheckStatus(taskDetailData)"
              >添加
            </dgg-button>
          </div>

          <div
            class="show-detail-filesList"
            v-if="DetailDocumentfileLists.length > 0"
          >
            <ul>
              <li
                v-for="(fileListItem, fileListIndex) in DetailDocumentfileLists"
                :key="fileListIndex"
              >
                <div class="icon-name">
                  <dgg-icon
                    :icon-class="getIconByType(fileListItem)"
                    svg-width="16px"
                    svg-height="16px"
                  />
                  <p>
                    {{ fileListItem.filename ? fileListItem.filename : "--" }}
                  </p>
                </div>
                <div class="dgg-button-group">
                  <dgg-button
                    class="brabBill-button brabBill-button2"
                    @click="
                      viewDocument(fileListItem, getDocumentType(fileListItem))
                    "
                    v-if="
                      getDocumentType(fileListItem) == 'pdf' ||
                        imageTypes.includes(getDocumentType(fileListItem))
                    "
                    >查看
                  </dgg-button>
                  <dgg-button
                    class="brabBill-button brabBill-button2"
                    @click="invalidDocument(fileListItem)"
                    >下载
                  </dgg-button>
                  <dgg-button
                    :class="[
                      'brabBill-button',
                      'brabBill-button2',
                      {
                        'braBill-button-disabled': isClickCheckStatus(
                          taskDetailData
                        )
                      }
                    ]"
                    @click="
                      !isClickCheckStatus(taskDetailData) &&
                        invalidDocument(fileListItem)
                    "
                    >作废
                  </dgg-button>
                </div>
              </li>
            </ul>
          </div>

          <div class="remarks">
            <div class="transactor ">
              <dgg-icon
                icon-class="icon_edit1"
                svg-width="14px"
                svg-height="14px"
              />
              <span class="transactor-type">备注</span>
            </div>
            <dgg-input
              v-model="remarksTextArea"
              type="textarea"
              maxlength="1000"
              oninput="if(value.length>1000)value=value.slice(0,1000)"
              class="remarksTextArea"
              :disabled="isClickCheckStatus(taskDetailData)"
              @blur="saveFormatRemarksTextArea(remarksTextArea)"
            />
            <dgg-button
              class="sava-remarks"
              :disabled="remarksTextArea.length < 1"
              :class="{ 'active-save-remarks': remarksTextArea.length > 0 }"
              @click="saveRemarksFn"
              >保存</dgg-button
            >

            <!-- 记录列表 -->
            <dgg-radio-group
              :active-data="activeRadioData"
              :is-button="true"
              :radio-array="radioArray"
              :space="20"
              @change="changeRadioVal"
            />
            <ul class="record-lists" v-if="recordListData.length > 0">
              <li
                class="current-list"
                v-for="(item, index) in recordListData"
                :key="index"
              >
                <img
                  :src="item.avatarUrl ? item.avatarUrl : userInfoSrc"
                  alt=""
                  :onerror="errorDefaultImg"
                  class="headimg"
                />
                <div class="content">
                  <div class="name-date">
                    <span class="name">{{
                      item.createName ? item.createName : "--"
                    }}</span
                    ><span class="date" v-if="item.createTime">{{
                      item.createTime | filteTime
                    }}</span>
                  </div>
                  <p class="desc">
                    {{ item.taskRecorde ? item.taskRecorde : "--" }}
                  </p>
                </div>
              </li>
            </ul>
            <!--  <p
              v-if="recordListData.length<1"
              class="no-remarks"
            >
              暂无数据！
            </p> -->
            <taskBitMap
              v-if="recordListData.length < 1"
              synopsis="暂无数据"
              style="margin-top:20px;"
            />
          </div>
        </div>
        <!-- 上传附件 -->
        <dgg-modal
          :modal="docModal"
          :hasmodal="true"
          :close-on-click-modal="false"
          :loading="fileLoading"
          title="上传附件"
          width="512px"
          class="document-upload-modal"
          @closeQuit="closeModal"
          @modalQuit="docModal = false"
          @modalAffirm="submitModal"
        >
          <dgg-upload-doc
            v-if="docModal"
            ref="uploadDoc"
            :limit="50"
            :auto-upload="false"
            :data="uploadparams"
            :file-list="fileList"
            :accept-type="acceptType"
            :list-url="listUrl"
            :del-url="deleteUrl"
            :action="uploadUrl"
            :onSuccess="onSuccess"
            :onError="fileLoadError"
            class="document-upload-demo"
            multiple
          >
            <dgg-button
              type="primary"
              style="width:100px"
              class="receive-button"
            >
              上传文件
            </dgg-button>
          </dgg-upload-doc>
        </dgg-modal>
        <!-- 图片类预览 -->
        <div v-show="imageView" class="img-handle-item">
          <el-image
            ref="imageViewRef"
            :src="imageUrl"
            style="width: 0; height: 0;"
            :preview-src-list="showImgList"
            class="fileimg"
          />
        </div>
        <!-- 暂无任务详情占位图 -->
        <taskBitMap
          v-if="Object.keys(taskDetailData).length < 1"
          synopsis="暂无任务详情"
        />
      </div>
    </div>
    <!-- 无任务大的占位图 -->
    <div class="dgg-no-task" v-if="!queryTemplateView">
      <taskBitMap
        :show-btn="true"
        :sendClassName="isClickTemplate(transactionItem)"
        @click-back="queryTemplateBtnClick"
      />

      <dgg-modal
        :modal="queryTemplateModalView"
        :show-close="false"
        :hasmodal="true"
        :close-on-click-modal="false"
        title="指定任务模板"
        width="920px"
        class="query-template-modal"
        @modalQuit="queryTemplateCloseModal"
        @modalAffirm="queryTemplateSubmitModal"
      >
        <dgg-input
          v-model="templateSearchKey"
          style="width:270px;"
          class="query-search-input"
          placeholder="请输入关键词搜索"
          :maxlength="30"
          onkeyup="if(value.length>30)value=value.slice(0,30)"
          @blur="templateKeyWordsSearch"
          @clear="templateKeyWordsSearch"
          @keyup.enter.native="$event.target.blur"
          clearable
        >
          <dgg-icon slot="prefix" icon-class="dgg-search" />
        </dgg-input>
        <ul class="templateLists" v-if="templateListsData.length > 0">
          <li
            :class="{
              'active-this-template': templateItem.id == chooseTemplateId
            }"
            v-for="(templateItem, templateIndex) in templateListsData"
            :key="templateIndex"
            @click="chooseTemplateList(templateItem)"
          >
            <h6>
              <span>{{ templateItem.processName }}</span>
              <dgg-icon
                :icon-class="
                  templateItem.id == chooseTemplateId
                    ? 'checkbox_selected'
                    : 'checkbox_default'
                "
                svg-width="16px"
                svg-height="16px"
                class="svg-icon"
              />
            </h6>
            <p>
              更新时间：<span>{{ templateItem.updateTime }}</span>
            </p>
          </li>
        </ul>
        <!-- 占位图 -->
        <taskBitMap
          v-if="templateListsData.length < 1"
          synopsis="呀，没找到相关模板，请联系管理员处理~~

"
        />
      </dgg-modal>
    </div>
    <!-- 已完结标签 -->
    <!-- v-if="transactionItem.orderStatusCode=='QDS_SC_ORDER_STATUS_CODE04'" -->
    <div
      class="finishImg"
      :class="{
        'back-order-seal-active': getOrderStatusSealName() == '已退单'
      }"
      fit="cover"
      v-if="getOrderStatusSealName()"
    >
      <!-- 返回盖章名称 -->
      <p class="finishImg-title">{{ getOrderStatusSealName() }}</p>
      <p class="finishImg-time">
        {{ transactionItem.endTime | timeFilter("YYYY.MM.DD") }}
      </p>
    </div>

    <!-- 右下角订单图标状态 -->
    <orderStatusIconComponents
      :storeTransactionItem="transactionItem"
    ></orderStatusIconComponents>
  </div>
</template>

<script>
// 加载页
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapMutations } from "vuex";
import taskBitMap from "@/views/main/page/components/taskBitMap.vue";
import orderStatusIconComponents from "@/views/main/page/components/orderStatusIcon.vue";
import moment from "moment";
import config from "@/service/config";
import fixedNotice from "@/views/main/page/components/fixedNotice.vue";
import taskTransactorImg from "@/assets/images/image_portrait_fault.png";
import transactorProp from "@/views/main/page/components/transactorProp.vue";
export default {
  name: "taskComponent",
  filters: {
    filteTime(val) {
      return moment(Number(val)).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  components: {
    taskBitMap, // 任务无数据占位图
    fixedNotice,
    transactorProp, //添加办理人弹窗
    orderStatusIconComponents //右下角订单图标状态
  },
  data() {
    return {
      fileLoading: false,
      queryinfiniteScrollFalg: false, //是否可无限滚动
      scrollQueryDataFlag: true, //是否可滚动备注和记录
      DetailQueryInventoryPage: 1, //备注和记录分页
      templateSlectState: true, //查询模板状态
      chooseAdminTemplateData: {}, //选定模板数据
      chooseTemplateId: "", //选定模板id
      templateListsData: [], //模板数据
      queryTemplateModalView: false, //显示指定模板弹窗
      queryTemplateView: false, //是否显示指定模板
      showEditDetailTaskNameView: false, //显示编辑任务名称
      transactorData: [], //选择店铺数据
      thisStoreRealName: "", //搜索办理人姓名关键字
      thisStorePhone: "", //搜索办理人手机号
      thisCheckedStoreId: "", //选定的办理人id
      formatTimesArr: [], //处理数据字典时间集合未id
      choosedTimeReminderTime: [], //处理选定的时间提醒
      addReminderTime: "", //添加的时间提醒
      showAddRemind: false, //显示添加提醒
      thisStoreRealName: "", //搜索办理人姓名关键字
      storeFlagUser: 0, //默认本店店铺
      taskExplainHeight: "48px", // 任务说明固定高度
      taskTransactorImg: taskTransactorImg, //办理人默认头像
      errorDefaultImg: 'this.src="' + taskTransactorImg + '"', //默认图地址
      taskDetailData: {}, //任务详情数据
      defaultTaskDetailItem: "", //获取详情的默认item
      defaultEditStageName: "", //默认修改阶段名称
      defaultTaskName: "", //默认任务名称
      chooseStateId: "", //选定的阶段id
      chooseTaskListId: "", //选定的任务列表id
      stageTaskListData: [], //即时搜索下拉列表
      showTips: false,
      popperOptions: {
        boundariesElement: "body"
      },

      btnName: "展开更多",
      iconType: "icon_extend",
      // 任务名称列表
      taskList: [],
      reminds: [], // 提醒
      toPhaseName: false, // 添加阶段
      phaseName: "", // 阶段名称
      toTaskName: false, // 添加阶段
      taskName: "", // 任务名称
      toTransactor: false, // 办理人选择框默认值
      tabNames: ["本所律师", "外部合作"], // 办理人切换标题
      currentTab: 0, // 添加办理人选项默认值
      count: 0, // 添加办理人本所律师
      activeRadioData: "1",
      radioArray: [
        {
          label: "备注",
          value: "1"
        },
        {
          label: "记录",
          value: "2"
        }
      ],
      taskDetailQueryType: 1, //查询备注和记录内容类型
      taskDetailTerminal: "caserecode_type_25",
      recordListData: [], //备注数据
      remarksTextArea: "", // 备注
      searchKey: "", // 搜索关键字
      templateSearchKey: "", //模板搜索关键字
      taskExplainAuto: true, // 默认隐藏
      allStageLists: [], //所有阶段列表
      taskListsData: [],
      clonetDetaildeadLineTime: "", //克隆截止时间
      list: [],
      fileList: [],
      showImgList: [],
      imageView: false,
      imageUrl: "",
      acceptType: [
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "mp3",
        "wma",
        "wav",
        "pdf",
        "pptx",
        "txt",
        "jpg",
        "jpeg",
        "gif",
        "png",
        "bmp",
        "rar",
        "zip",
        "gz",
        "mp4",
        "wmv",
        "avi",
        "3gp",
        "mkv"
      ],
      docIconList: {
        ".doc.docx": "icon_word",
        ".xls.xlsx": "icon_excel",
        ".ppt.pptx": "icon_ppt",
        ".txt": "icon_txt",
        ".mp3.wma.wav": "icon_music",
        ".mp4.wmv.avi.3gp.mkv": "icon_video",
        ".jpg.jpeg.gif.png.bmp": "icon_pic",
        ".rar.zip.gz": "icon_package",
        ".pdf": "icon_pdf"
      },
      DetailDocumentfileLists: [], //查询的详情附件列表
      DetailDocumentfileId: "", //上传的附件ID
      officeTypes: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt"],
      imageTypes: ["jpg", "jpeg", "gif", "png", "bmp"],
      docModal: false, // 上传附件控制模态框的
      taskMissonContent: "", //任务说明内容
      showTaskMissonContent: false, //显示添加任务说明
      defulutTimeKey: "截止前",
      userInfoSrc: require("@/assets/images/image_head_default.png"), //默认记录头像
      taskloading: false
    };
  },
  computed: {
    ...mapState([
      "userId",
      "transactionItem",
      "personMsg",
      "orderStatus",
      "orderStatusName",
      "storeQalNspectionsStatus", //质检任务返回名称
      "allRemindTimesData",
      "storeInfoData", //店铺信息
      "personMsg" //店铺信息
    ]),
    uploadUrl() {
      return config.uploadUrl;
    },
    listUrl() {
      return config.listUrl;
    },
    downloadUrl() {
      return config.downloadUrl;
    },
    deleteUrl() {
      return config.deleteUrl;
    },
    uploadparams() {
      let fid = this.DetailDocumentfileId.split("_");
      console.log(fid, "++++++++++++++++++++++++++++++++");
      // console.error(fid[0] + "_" + fid[1], "kasdgkdsakgdsfakgsafkgdsa");
      return {
        // fileId: fid[0] + "_" + fid[1] + "_" + fid[2] + "_" + fid[3],
        fileId: fid[0] + "_" + fid[1],
        fileIdAdd: fid[2] + "_" + fid[3],
        isDeleteOriginalFile: false,
        type: fid[4] + "_" + fid[5]
      };
    }
  },
  created() {
    console.log(this.transactionItem, "this.transactionItem++++++");
    if (this.transactionItem.processId) {
      let sessionChooseStageId = sessionStorage.getItem("transactionStageId");
      let sessionChooseTaskId = sessionStorage.getItem("transactionTaskId");
      if (sessionChooseStageId) {
        this.chooseStateId = sessionChooseStageId;
      }
      if (sessionChooseTaskId) {
        this.chooseTaskListId = sessionChooseTaskId;
      }
      //查询封装的列表接口
      this.queryTemplateView = true;
      this.commonStageListService();
    } else {
      //查询指定模板
      this.queryTemplateFn();
    }
  },
  async mounted() {},
  beforeDestroy() {
    this.setTransactionStageId("");
    this.setTransactionTaskId("");
  },

  methods: {
    ...mapActions("transactionTaskModule", [
      "search_stage_and_task", //任务的搜索匹配
      "task_and_by_stage_id", //通过阶段id去查询任务
      "stage_list_service", //阶段列表接口
      "delete_phase_service", //删除阶段接口
      "modify_phase_services", //编辑阶段接口
      "new_phase_services", //添加阶段
      "new_task_service", //添加任务接口
      "task_name_editor", //任务名称编辑
      "delete_task_service", //删除任务接口
      "query_template", //模板列表接口
      "template_demapnotes", //指定模板详情接口
      "new_template_service" //指定模板详情接口
    ]),
    ...mapActions("workbenchTaskModule", [
      "task_details_service", //任务详情接口
      "task_detail_generate", //添加备注接口、任务说明添加跟更改接口
      "task_query_inventory", //查询跟案记录
      "task_add_reminder", //设置提醒
      "task_updtae_reminder", //修改提醒
      "task_delete_reminder", //删除提醒
      "get_store_user", //获取店铺和外部人员信息
      "task_setting_manager", //添加办理人
      "task_description_change", //添加任务说
      "task_change_deadline", //修改截止时间接口
      "deleter_setting_manger" //删除办理人
    ]),
    ...mapActions("transactionModule", [
      "search_files",
      "update_files",
      "search_files_cms"
    ]),
    ...mapActions("workbenchModule", [
      "complete_task_service" //即将到期、已超期、我的待办、我分配的下面列表复选框---任务已完成、任务未完成、激活任务接口
    ]),
    ...mapActions("commonModule", [
      // 记录当前操作信息
      "genera_tetemplate"
    ]),
    ...mapMutations([
      "setTransactionStageId", //设置办理阶段id
      "setTransactionTaskId" //设置办理任务id
    ]),
    //触底更新备注或记录
    dropdownDetailQueryInventory() {
      //下拉分页效果记录和备注
      if (this.scrollQueryDataFlag) {
        this.getTaskQueryInentory();
      }
    },
    //返回订单盖章名称
    getOrderStatusSealName() {
      switch (this.transactionItem.orderStatusCode) {
        case this.orderStatus.QDS_SC_ORDER_FINISH: // 已完结
          return "已完结";
          break;
        case this.orderStatus.QDS_SC_ORDER_REFUND: // 已退单
          return "已退单";
          break;
        default:
          return "";
          break;
      }
    },
    //修改日期时间
    expireTimeOption(receiveTime) {
      return {
        disabledDate(date) {
          //console.log(moment(receiveTime).valueOf(), "date--------------");
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          // return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          if (receiveTime) {
            return date.getTime() + 86400000 < moment(receiveTime).valueOf();
          }
        }
      };
    },
    //是否可以点击操作框
    isClickCheckStatus(item) {
      if (
        //已退单和已完结返回为true
        this.transactionItem.orderStatusCode ==
          this.orderStatus.QDS_SC_ORDER_FINISH ||
        this.transactionItem.orderStatusCode ==
          this.orderStatus.QDS_SC_ORDER_REFUND
      ) {
        return true;
      } else {
        if (item.taskSwitching == 1) {
          if (item.isCheck == 1) {
            //待质检
            if (item.qalNspectionsStatus == "NODE_QUALITY_AWAIT") {
              return true;
            }
            if (item.qalNspectionsStatus == "NODE_QUALITY_REVIEW") {
              return true;
            }
            //质检已通过
            if (item.qalNspectionsStatus == "NODE_QUALITY_COMPLETE") {
              return true;
            }
            //质检驳回
            if (item.qalNspectionsStatus == "NODE_QUALITY_REFUSE") {
              return false;
            }
          } else {
            //非质检
            return false;
          }
        } else {
          //未完成全部可以点击
          return false;
        }
      }
    },
    //通过关键字查询模板
    templateKeyWordsSearch() {
      this.templateSlectState = false;
      //查询指定模板
      this.queryTemplateFn();
    },
    //查询指定模板
    queryTemplateFn() {
      this.query_template({
        searchInfo: this.templateSearchKey,
        productId: this.transactionItem.productId,
        orderId: this.transactionItem.id,
        state: this.templateSlectState, //订单进来默认为true  通过关键字查询的时候变为false
        businessTypeCode: "BUS_YT_FL"
      }).then(res => {
        if (res.code == 200) {
          if (Object.keys(res.data).length > 0) {
            if (res.data.processId) {
              //查询封装的列表接口
              this.queryTemplateView = true;
              this.commonStageListService();
            } else {
              this.$nextTick(() => {
                this.queryTemplateView = false;
                this.templateListsData = res.data.templateConfigs;
                // console.log(this.templateListsData, "模板数据调试---");
              });
            }
          }
        }
      });
    },
    //处理字符串长度
    GetLength(str) {
      ///<summary>获得字符串实际长度，中文2，英文1</summary>
      var realLength = 0,
        len = str.length,
        charCode = -1;
      for (var i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128) realLength += 1;
        else realLength += 2;
      }
      return realLength;
    },
    //选择模板
    chooseTemplateList(item) {
      this.chooseTemplateId = item.id;
    },
    //关闭指定模板弹窗
    queryTemplateCloseModal() {
      this.queryTemplateModalView = false;
      this.chooseTemplateId = ""; //重置选定模板id
    },
    //关闭指定模板弹窗
    queryTemplateSubmitModal() {
      if (this.chooseTemplateId) {
        this.template_demapnotes({
          processId: this.chooseTemplateId,
          orderId: this.transactionItem.id
        })
          .then(res => {
            if (res.code == 200) {
              this.$nextTick(() => {
                this.queryTemplateModalView = false;
                this.queryTemplateView = true;
                this.templateSearchKey = "";
                //查询封装的列表接口
                this.commonStageListService();
              });
            }
          })
          .catch(error => {
            this.$notify({
              message: res.message,
              type: "warning",
              customClass: "dgg-tip-msg"
            });
          });
        return;
      } else {
        this.$notify({
          type: "warning",
          message: "未选择模板，请选择后再进行操作。",
          customClass: "dgg-tip-msg"
        });
      }
    },

    // 点击复选框
    stateChange(item) {
      // console.log(item, "改变状态----");
      // console.log(postCompleteTask, "postCompleteTask----");
      if (!(item.isKeyTask == 1) && !(item.taskSwitching == 1)) {
        this.$confirm("确认完成任务？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(res => {
            //即将到期、已超期、我的待办、我分配的下面列表复选框---任务已完成、任务未完成、激活任务接口
            this.requestCompleteTaskService(item, 1);
          })
          .catch(error => {
            item.taskSwitching = 0;
          });
      }
      if (item.isKeyTask == 1 && !(item.taskSwitching == 1)) {
        this.$confirm(
          "该任务为关键任务，点击完成后将提交至后台进行质检，确认完成？",
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(res => {
            //即将到期、已超期、我的待办、我分配的下面列表复选框---任务已完成、任务未完成、激活任务接口
            this.requestCompleteTaskService(item, 1);
            // this.taskAndByStageIdFn(this.chooseStateId)
          })
          .catch(error => {
            item.taskSwitching = 0;
          });
      }
      if (item.taskSwitching == 1) {
        this.$confirm(
          "激活任务后，任务将重新显示为未完成状态，任务信息不改变，确认激活？",
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(res => {
            //即将到期、已超期、我的待办、我分配的下面列表复选框---任务已完成、任务未完成、激活任务接口
            this.requestCompleteTaskService(item, 0);
          })
          .catch(error => {
            item.taskSwitching = 1;
          });
      }
    },
    // 即将到期、已超期、我的待办、我分配的下面列表复选框---任务已完成、任务未完成、激活任务接口
    requestCompleteTaskService(item, num) {
      this.complete_task_service({
        taskId: item.taskId, //订单状态编码
        taskSwitching: Number(num),
        activatedOrNot: Number(item.isKeyTask)
      }).then(res => {
        if (res.code == 200) {
          this.$notify({
            title: "提示",
            message: res.message,
            type: "success",
            customClass: "dgg-tip-msg"
          });
          this.$nextTick(() => {
            item.taskSwitching = num;
            this.commonStageListService();
            // this.taskAndByStageIdFn(this.chooseStateId);
          });
        } else {
          this.$notify({
            message: res.message,
            type: "error",
            customClass: "dgg-tip-msg"
          });
        }
      });
    },
    //编辑任务名称之前
    befroreEditTaskName() {
      this.showEditDetailTaskNameView = true;
      this.$nextTick(() => {
        this.defaultTaskName = this.taskDetailData.taskName;
        this.$refs.editDetailTaskName.$refs.input.focus();
      });
    },
    //任务名称编辑
    taskNameEditor(item) {
      if (item.taskName) {
        this.task_name_editor({
          orderId: item.orderId,
          taskId: item.taskId,
          taskName: item.taskName
        })
          .then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                message: "操作成功",
                type: "success",
                customClass: "dgg-tip-msg"
              });

              //通过阶段id去查询任务
              this.taskAndByStageIdFn(this.chooseStateId);
            } else {
              this.$notify({
                message: "修改任务名称失败！",
                type: "error",
                customClass: "dgg-tip-msg"
              });

              this.$nextTick(() => {
                item.taskName = this.defaultTaskName;
              });
            }
            this.showEditDetailTaskNameView = false;
          })
          .catch(error => {
            this.$notify({
              message: "修改任务名称失败！",
              type: "error",
              customClass: "dgg-tip-msg"
            });
            this.$nextTick(() => {
              item.taskName = this.defaultTaskName;
            });
            this.showEditDetailTaskNameView = false;
          });
      } else {
        this.$notify({
          message: "修改任务名称失败！",
          type: "error",
          customClass: "dgg-tip-msg"
        });
        this.$nextTick(() => {
          item.taskName = this.defaultTaskName;
        });
      }
      this.showEditDetailTaskNameView = false;
    },
    //删除任务接口
    detailTaskService(item) {
      this.$confirm("是否删除该任务？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delete_task_service({
            orderId: item.orderId,
            taskId: item.taskId
          })
            .then(res => {
              if (res.code == 200) {
                this.$notify({
                  title: "提示",
                  message: "删除成功",
                  type: "success",
                  customClass: "dgg-tip-msg"
                });
                this.chooseTaskListId = "";
                //查询封装的列表接口
                this.commonStageListService();
                //通过阶段id去查询任务
                this.taskAndByStageIdFn(this.chooseStateId);

                /*    this.chooseTaskListId = ""; //清空选择taskid
                //通过阶段id去查询任务
                this.taskAndByStageIdFn(item.stageId); */
              } else {
                this.$notify({
                  message: res.message,
                  type: "error",
                  customClass: "dgg-tip-msg"
                });
              }
            })
            .catch(error => {
              this.$notify({
                message: res.message,
                type: "error",
                customClass: "dgg-tip-msg"
              });
            });
        })
        .catch(error => {
          return;
        });
    },

    taskChangeDeadlineTime(val) {
      let sendVal = val == null ? "" : val;
      if (!sendVal) {
        this.$confirm("是否删除截止时间？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(res => {
            this.sendTaskChangeDeadLine(sendVal);
          })
          .catch(error => {
            this.taskDetailData.deadLine = this.clonetDetaildeadLineTime;
            return;
          });
      } else {
        this.sendTaskChangeDeadLine(sendVal);
      }
    },
    //修改截止时间
    sendTaskChangeDeadLine(sendVal) {
      this.task_change_deadline({
        taskId: this.defaultTaskDetailItem.taskId,
        deadline: sendVal
      })
        .then(res => {
          if (res.code == 200) {
            this.$notify({
              title: "提示",
              message: "操作成功",
              type: "success",
              customClass: "dgg-tip-msg"
            });
            //清空详情数据数据
            this.clearDetailData();
            this.taskAndByStageIdFn(this.chooseStateId);
          } else {
            this.$notify({
              message: res.message,
              type: "error",
              customClass: "dgg-tip-msg"
            });
            this.$nextTick(() => {
              this.taskDetailData.deadLine = this.clonetDetaildeadLineTime;
            });
          }
        })
        .catch(error => {
          this.$notify({
            type: "error",
            message: res.message,
            customClass: "dgg-tip-msg"
          });
        });
    },
    // 根据文件类型返回icon
    getIconByType(item) {
      const type =
        item.filename &&
        item.filename.substr(item.filename.lastIndexOf(".") + 1);
      const typeItem = Object.keys(this.docIconList).find(
        ty => ty.indexOf(type) > -1
      );
      return this.docIconList[typeItem] || "icon_others";
    },
    // 查看文档
    viewDocument(item, type) {
      // 图片预览
      if (this.imageTypes.includes(type)) {
        this.imageUrl = "";
        this.imageView = true;
        this.imageUrl = item.filepath;
        this.showImgList = [this.imageUrl];
        this.$forceUpdate();
        this.$refs.imageViewRef.clickHandler();
      } else {
        // 其他文件查看
        const fileName = encodeURI(encodeURI(item.filename));
        window.open(item.filepath + "?title=" + fileName);
      }
    },
    //获取文件类型
    getDocumentType(item) {
      const type =
        item.filename &&
        item.filename.substr(item.filename.lastIndexOf(".") + 1);
      return type;
    },
    // 下载文档
    downloadDocument(item) {
      const fileName = encodeURI(encodeURI(item.filename));
      const url =
        this.downloadUrl +
        "?fileUrl=" +
        item.filepath +
        "&fileName=" +
        fileName;
      window.open(url, "_blank");
    },
    // 作废文档
    invalidDocument(item) {
      this.$confirm(
        "作废后可在作废文件夹中找回该文件，确认要作废该文件？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 作废操作
          this.update_files({
            fileId: item.fileid,
            fileName: item.filename,
            state: 0
          }).then(res => {
            if (res.code === 200) {
              this.$notify({
                title: "提示",
                message: "操作成功",
                type: "success",
                customClass: "dgg-tip-msg"
              });
              //添加作废记录
              this.invalidDocumentRecords("", item);
              //请求详情附件列表
              this.searchFilesFn();
            } else {
              this.$notify({
                message: res.message,
                type: "error",
                customClass: "dgg-tip-msg"
              });
            }
          });
        })
        .catch(() => {
          //
        });
    },
    isClickTemplate(item) {
      if (item.currentUserOperationOrderPermissions) {
        if (
          this.$route.name == "finishDetailsTask" ||
          this.$route.name == "chargeBackDetailsTask"
        ) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },
    //点击指定任务模板事件
    queryTemplateBtnClick() {
      this.queryTemplateModalView = true;
    },

    //关闭文件上传模态框
    closeModal() {
      this.docModal = false;

      //请求详情附件列表
      this.searchFilesFn();
    },

    //显示添加任务说明文本域
    showTaskMissonContentView(content) {
      this.showTaskMissonContent = !this.showTaskMissonContent;
      if (this.showTaskMissonContent) {
        this.$nextTick(() => {
          this.$refs.editTaskMissonContentVal.$refs.textarea.focus();
        });
      }
      if (content) {
        this.taskMissonContent = content;
      } else {
        this.taskMissonContent = "";
      }
    },
    //添加任务说明
    addtaskKewordsVal(content) {
      this.task_description_change({
        taskDescription: content,
        taskId: this.defaultTaskDetailItem.taskId
      }).then(res => {
        if (res.code == 200) {
          this.$notify({
            title: "提示",
            type: "success",
            message: res.message,
            customClass: "dgg-tip-msg"
          });
          //清除详情数据
          this.clearDetailData();
          //更新详情数据
          this.updateDeatailData();
        } else {
          this.$notify({
            type: "error",
            message: "任务说明不能为空！",
            customClass: "dgg-tip-msg"
          });
          return;
        }
      });
    },
    //修改提醒
    changeRemidItem(item) {
      this.$nextTick(() => {
        this.task_updtae_reminder({
          taskId: this.defaultTaskDetailItem.taskId, //任务id
          taskName: this.defaultTaskDetailItem.taskName, //任务
          reminderCondition: item.reminderCondition,
          reminderValue: item.reminderValue,
          remindId: item.remindId
        }).then(res => {
          if (res.code == 200) {
            this.$notify({
              title: "提示",
              type: "success",
              message: res.message,
              customClass: "dgg-tip-msg"
            });
            //清除详情数据
            this.clearDetailData();
            //更新详情数据
            this.updateDeatailData();
          } else {
            this.$notify({
              type: "error",
              message: res.message,
              customClass: "dgg-tip-msg"
            });
            return;
          }
        });
      });
    },
    // 删除添加的提醒
    remindDelete(item) {
      this.$confirm("是否删除本条提醒时间？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.task_delete_reminder({
            remindId: item.remindId
          }).then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                type: "success",
                message: res.message,
                customClass: "dgg-tip-msg"
              });
              //清除详情数据
              this.clearDetailData();
              //更新详情数据
              this.updateDeatailData();
            } else {
              this.$notify({
                type: "error",
                message: res.message,
                customClass: "dgg-tip-msg"
              });
              return;
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    //添加提醒
    addRemidItem(item) {
      this.task_add_reminder({
        taskId: this.defaultTaskDetailItem.taskId, //任务id
        taskName: this.defaultTaskDetailItem.taskName, //任务
        reminderCondition: this.defulutTimeKey,
        reminderValue: item
      }).then(res => {
        if (res.code == 200) {
          this.$notify({
            title: "提示",
            type: "success",
            message: res.message,
            customClass: "dgg-tip-msg"
          });
          //清除详情数据
          this.clearDetailData();
          //更新详情数据
          this.updateDeatailData();
        } else {
          this.$notify({
            message: res.message,
            type: "error",
            customClass: "dgg-tip-msg"
          });
          return;
        }
      });
    },
    //更新详情数据
    updateDeatailData() {
      //点击列表事件
      this.selectDetailData(this.defaultTaskDetailItem.taskId);
    },
    saveFormatRemarksTextArea(e) {
      this.remarksTextArea = e.replace(/(^\s*)|(\s*$)/g, "");
    },
    //添加备注接口、任务说明添加跟更改接口
    saveRemarksFn() {
      // console.log(this.defaultTaskDetailItem);
      // console.log(this.personMsg, "this.personMsg--");
      if (this.remarksTextArea && this.defaultTaskDetailItem) {
        this.task_detail_generate({
          temType: "caserecode_type_25", //模板code
          proId: this.defaultTaskDetailItem.orderId, //生产单id
          proName: this.defaultTaskDetailItem.orderName, //生产单
          stageId: this.defaultTaskDetailItem.stageId, //阶段id
          stageName: this.defaultTaskDetailItem.stageName, //阶段
          taskId: this.defaultTaskDetailItem.taskId, //任务id
          taskName: this.defaultTaskDetailItem.taskName, //任务
          taskUserId: this.defaultTaskDetailItem.taskManagerId, //操作人
          operateName: this.personMsg.userName, //操作人名字
          operateId: this.personMsg.userId, //操作人id
          //订单记录值和任务卡片记录值填充数据数组，对{}表示数据按顺序填充。如：取消任务（{任务名称}）分配：{被取消的办理人}
          rmarks: [
            this.defaultTaskDetailItem.taskName,
            this.remarksTextArea,
            this.remarksTextArea
          ]
        })
          .then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                type: "success",
                message: res.message,
                customClass: "dgg-tip-msg"
              });
              this.remarksTextArea = ""; //清空任务说明
              //查询记录和备注信息
              this.DetailQueryInventoryPage = 1;
              this.recordListData = [];
              //查询记录和备注信息
              this.getTaskQueryInentory();
            } else {
              this.$notify({
                type: "error",
                message: res.message,
                customClass: "dgg-tip-msg"
              });
              return;
            }
          })
          .catch(error => {});
      }
    },
    //查询记录和备注信息
    getTaskQueryInentory() {
      this.task_query_inventory({
        page: this.DetailQueryInventoryPage, //页数，默认为0
        limit: 20, //页数，默认为0
        queryType: this.taskDetailQueryType, //查询内容类型
        proId: this.defaultTaskDetailItem.orderId, //生产单id
        stageId: this.defaultTaskDetailItem.stageId, //阶段id
        taskId: this.defaultTaskDetailItem.taskId, //任务id
        temType: this.taskDetailTerminal //模板id
      }).then(res => {
        if (res.code == 200) {
          if (res.data.records.length < 20) {
            this.scrollQueryDataFlag = false;
            this.queryinfiniteScrollFalg = true;
          } else {
            this.scrollQueryDataFlag = true;
            this.queryinfiniteScrollFalg = false;
            this.DetailQueryInventoryPage++;
          }
          this.$nextTick(() => {
            this.recordListData = [...this.recordListData, ...res.data.records];
          });
        } else {
          this.DetailQueryInventoryPage = 1;
          this.scrollQueryDataFlag = false;
          this.queryinfiniteScrollFalg = true;
          this.recordListData = [];
        }
      });
    },
    // 改变任务说明内容高度
    changeTaskExplainHight() {
      if (this.taskExplainHeight == "48px") {
        this.taskExplainHeight = "none";
        this.btnName = "收起";
        this.iconType = "icon_retract";
      } else {
        this.taskExplainHeight = "48px";
        this.btnName = "展开更多";
        this.iconType = "icon_extend";
      }
    },
    changeRadioVal(data) {
      this.queryinfiniteScrollFalg = true;
      this.scrollQueryDataFlag = true;
      this.DetailQueryInventoryPage = 1;
      this.recordListData = [];
      this.activeRadioData = data;
      //1 代表备注  2代表记录
      if (data == 1) {
        this.taskDetailQueryType = 1; //查询备注和记录内容类型
        this.taskDetailTerminal = "caserecode_type_25";
      } else {
        this.taskDetailQueryType = ""; //查询备注和记录内容类型
        this.taskDetailTerminal = "";
      }
      //查询记录和备注信息;
      this.getTaskQueryInentory();
    },
    // 添加办理人选择框内tab切换
    changeStoreFlagUser(val) {
      this.storeFlagUser = val;
      //查询店铺信息
      this.requestStoreUser();
    },
    // 选择办理人弹框内的列表无限加载
    load() {
      return;
      this.count += 2;
    },
    // 点添加办理人icon
    addTransactor(event) {
      const evt = window.event || event;
      evt.preventDefault();
      evt.stopPropagation();
      this.toTransactor = !this.toTransactor;
      //查询店铺信息
      this.requestStoreUser();
    },
    //查询店铺信息
    requestStoreUser() {
      if (this.storeInfoData.storeId) {
        this.get_store_user({
          storeId: this.storeInfoData.storeId, //店铺ID
          realName: this.thisStoreRealName, //用户姓名，只有flag为0时有效
          phone: this.thisStorePhone, //手机号
          flag: this.storeFlagUser, //0:获取本店铺的用户 1：获取店铺外的店铺
          isCertification: 1,
          currentStatus: "EMPLOYEE_STATUS_1"
        })
          .then(res => {
            if (res.code == 200) {
              this.transactorData = res.data;
            }
          })
          .catch(error => {});
      }
    },
    //获取关键字
    storeKeyWordsFn(state, val) {
      if (state == 0) {
        //0为本店铺
        this.thisStoreRealName = val;
      } else {
        //外部店铺
        this.thisStorePhone = val;
      }
      //查询店铺信息
      this.requestStoreUser();
    },
    //清空办理人手机号和姓名
    clearNamePhone() {
      this.thisStoreRealName = "";
      this.thisStorePhone = "";
    },
    //关闭办理人店铺筛选
    closeStoreProp() {
      this.toTransactor = false;
      this.storeFlagUser = 0; //改变为本店店铺
      this.thisCheckedStoreId = ""; //清空选定办理人id

      //清空办理人手机号和姓名
      this.clearNamePhone();
    },
    //选定办理人Id
    chooseStoreDataFn(item) {
      this.thisCheckedStoreId = item.userId;
      this.$nextTick(() => {
        //添加办理人
        this.task_setting_manager({
          taskId: this.defaultTaskDetailItem.taskId, //任务id
          taskManager: item.realName, //办理人
          taskManagerId: item.userId, //办理人id
          operator: this.personMsg.userName, //操作人姓名(登录人的)
          operatorId: this.personMsg.userId //操作人id（登录人的）
        }).then(res => {
          if (res.code == 200) {
            this.$notify({
              title: "提示",
              type: "success",
              message: res.message,
              customClass: "dgg-tip-msg"
            });
            this.$nextTick(() => {
              //清空详情数据数据
              this.clearDetailData();
              this.taskAndByStageIdFn(this.chooseStateId);
            });
          } else {
            this.$notify({
              type: "error",
              message: res.message,
              customClass: "dgg-tip-msg"
            });
            return;
          }
        });
      });
    },
    //办理人删除
    deleteTransacTorPeople() {
      this.deleter_setting_manger({
        taskId: this.defaultTaskDetailItem.taskId, //任务id
        taskManager: this.defaultTaskDetailItem.taskManager, //办理人
        taskManagerId: this.defaultTaskDetailItem.taskManagerId, //办理人id
        operator: this.personMsg.userName, //操作人姓名(登录人的)
        operatorId: this.personMsg.userId //操作人id（登录人的）
      }).then(res => {
        if (res.code == 200) {
          this.$notify({
            title: "提示",
            type: "success",
            message: res.message,
            customClass: "dgg-tip-msg"
          });
          //清空详情数据数据
          this.clearDetailData();
          this.taskAndByStageIdFn(this.chooseStateId);
        } else {
          this.$notify({
            type: "error",
            message: res.message,
            customClass: "dgg-tip-msg"
          });
          return;
        }
      });
    },
    //查询详情
    selectDetailData(taskid) {
      this.chooseTaskListId = taskid;

      //清空办理人手机号和姓名
      this.clearNamePhone();

      //调用详情数据
      this.selectDetailDataFn(taskid);
    },

    //清空详情数据
    clearDetailData() {
      this.$nextTick(() => {
        this.toTransactor = false; //关闭添加办理人弹窗
        this.thisCheckedStoreId = ""; //清空选中的办理人
        this.taskDetailData = {};
        this.remarksTextArea = ""; //清空记录
        this.choosedTimeReminderTime = []; //清空处理好的时间提醒集合
        this.addReminderTime = ""; //清空选定的值
        this.showAddRemind = false; //显示添加按钮
        this.taskMissonContent = ""; //清空任务说明
        this.showTaskMissonContent = false; //隐藏修改任务说明
        this.DetailDocumentfileLists = []; //查询的详情附件列表
        this.DetailDocumentfileId = ""; //上传的附件ID
        this.activeRadioData = "1";
        this.defaultTaskName = ""; //默认任务名称为空
        this.showEditDetailTaskNameView = false; //不显示编辑任务名称
        this.taskDetailQueryType = 1;
        this.recordListData = [];
        this.DetailQueryInventoryPage = 1;
      });
    },

    //关闭即时搜索框
    stageClickoutSide() {
      this.stageTaskListData = [];
    },
    //点击即时搜索阶段列表
    selectStageTask(val) {
      if (val.length > 0) {
        this.search_stage_and_task({
          orderId: this.transactionItem.id,
          conditionId: val
        })
          .then(res => {
            if (res.code == 200) {
              if (res.data.length > 0) {
                this.$nextTick(() => {
                  this.stageTaskListData = res.data;
                });
              } else {
                this.$nextTick(() => {
                  this.stageTaskListData = [];
                });
              }
            }
          })
          .catch(error => {
            this.$nextTick(() => {
              this.stageTaskListData = [];
              this.stageTaskListData = [];
            });
          });
      }
    },
    //选定查询出来的搜索条件
    chooseStageTaskId(item) {
      if (item.stageId) {
        this.chooseStateId = item.stageId;

        //通过阶段id去查询任务
        this.taskAndByStageIdFn(item.stageId);
      }
      if (item.taskId) {
        this.chooseTaskListId = item.taskId;
      }
      if (item.name) {
        this.searchKey = item.name;
      }
      this.stageTaskListData = [];
    },
    //通过阶段id去查询任务FN
    taskAndByStageIdFn(stageid) {
      this.task_and_by_stage_id({
        stageId: stageid
      })
        .then(res => {
          if (res.code == 200 && res.data.length > 0) {
            this.$nextTick(() => {
              if (res.data.length > 0) {
                this.taskListsData = res.data;
                if (this.chooseTaskListId == 0 || !this.chooseTaskListId) {
                  this.chooseTaskListId = res.data[0].taskId;
                }
                //查询详情数据
                this.selectDetailData(this.chooseTaskListId);
              } else {
                this.taskListsData = [];
                this.clearDetailData();
              }
            });
          } else {
            this.$nextTick(() => {
              this.taskListsData = [];
              this.clearDetailData(); //清空详情数据
            });
          }
        })
        .catch(error => {
          this.$nextTick(() => {
            this.taskListsData = [];
            this.clearDetailData(); //清空详情数据
          });
        });
    },
    //查询封装的列表接口
    commonStageListService() {
      this.stage_list_service({
        orderId: this.transactionItem.id,
        conditionId: this.searchKey
      })
        .then(res => {
          if (res.code == 200) {
            this.$nextTick(() => {
              if (res.data.length > 0) {
                this.$nextTick(() => {
                  if (res.data.length > 0) {
                    this.phaseName = ""; //添加阶段输入框
                    this.toPhaseName = false;
                    this.taskName = ""; //添加任务
                    this.toTaskName = false;
                    this.allStageLists = res.data;

                    if (!this.chooseStateId) {
                      this.chooseStateId = res.data[0].stageId;
                    }
                    this.taskAndByStageIdFn(this.chooseStateId);
                  } else {
                    this.$nextTick(() => {
                      this.defaultEditStageName = ""; //默认修改阶段名称
                      this.phaseName = ""; //添加阶段输入框
                      this.toPhaseName = false;
                      this.taskName = ""; //添加任务
                      this.toTaskName = false;
                      this.chooseStateId = ""; //选定的阶段id
                      this.chooseTaskListId = ""; //选定的任务列表id
                      this.allStageLists = []; //清空阶段数据
                      this.taskListsData = []; //清空任务数据
                      this.clearDetailData(); //清空详情数据
                    });
                  }
                });
              } else {
                this.$nextTick(() => {
                  this.defaultEditStageName = ""; //默认修改阶段名称
                  this.phaseName = ""; //添加阶段输入框
                  this.toPhaseName = false;
                  this.taskName = ""; //添加任务
                  this.toTaskName = false;
                  this.chooseStateId = ""; //选定的阶段id
                  this.chooseTaskListId = ""; //选定的任务列表id
                  this.allStageLists = []; //清空阶段数据
                  this.taskListsData = []; //清空任务数据
                  this.clearDetailData(); //清空详情数据
                });
              }
            });
          }
        })
        .catch(error => {});
    },
    //删除阶段接口
    deletePhoaseService(id) {
      this.phaseName = ""; //添加阶段输入框
      this.toPhaseName = false;
      this.taskName = ""; //添加任务
      this.toTaskName = false;
      this.$confirm(
        "删除阶段后，该阶段所包含的任务将归入“未分阶段”，确认删除？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.delete_phase_service({
            stageId: id,
            orderId: this.transactionItem.id
          })
            .then(res => {
              if (res.code == 200) {
                if (id == this.chooseStateId) {
                  this.$nextTick(() => {
                    this.chooseStateId = "";
                    this.chooseTaskListId = "";
                    this.clearDetailData();
                  });
                }
                this.$nextTick(() => {
                  this.$notify({
                    title: "提示",
                    message: res.message,
                    type: "success",
                    customClass: "dgg-tip-msg"
                  });
                });
                this.phaseName = ""; //添加阶段输入框
                this.toPhaseName = false;
                this.taskName = ""; //添加任务
                this.toTaskName = false;
                //查询封装的列表接口
                this.commonStageListService();
              } else {
                this.$notify({
                  message: res.message,
                  type: "error",
                  customClass: "dgg-tip-msg"
                });
              }
            })
            .catch(error => {
              this.$notify({
                message: res.message,
                type: "error",
                customClass: "dgg-tip-msg"
              });
            });
        })
        .catch(error => {
          return;
        });
    },
    //修改名称input获取焦点
    showStageName(item, index) {
      item.isEdit = 1;
      this.chooseTaskListId = "";
      this.$nextTick(() => {
        this.chooseStateId = item.stageId;
        this.phaseName = ""; //添加阶段输入框
        this.toPhaseName = false;

        this.taskName = ""; //添加任务
        this.toTaskName = false;

        this.defaultEditStageName = item.stageName;
        this.$refs["autofocus" + index][0].$refs.input.focus();

        //清空任务列表、和详情列表
        this.stageTaskListData = [];
        this.taskListsData = [];

        this.taskAndByStageIdFn(item.stageId); //查询任务数据
      });
    },
    //编辑阶段接口
    changeStageName(item) {
      if (item.stageName) {
        this.modify_phase_services({
          orderId: this.transactionItem.id,
          stageId: item.stageId,
          stageName: item.stageName
        })
          .then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                message: "保存成功",
                type: "success",
                customClass: "dgg-tip-msg"
              });

              //查询封装的列表接口
              this.commonStageListService();
            } else {
              this.$notify({
                message: res.message,
                type: "error",
                customClass: "dgg-tip-msg"
              });
              this.$nextTick(() => {
                item.stageName = this.defaultEditStageName;
              });
            }
          })
          .catch({});
      } else {
        this.$notify({
          message: "保存失败！",
          type: "error",
          customClass: "dgg-tip-msg"
        });
        this.$nextTick(() => {
          item.stageName = this.defaultEditStageName;
        });
      }
      item.isEdit = 0;
    },
    // 添加阶段
    addPhaseName() {
      this.toPhaseName = true;
      this.toTaskName = false;
      this.taskName = ""; //添加任务
      this.toTaskName = false;
      this.$nextTick(() => {
        this.$refs.addStageInput.$refs.input.focus();
      });
    },
    addStagename(name) {
      console.log(name, "新增阶段名称----------");
      if (!name) {
        this.$notify({
          message: "请输入阶段名称！",
          type: "error",
          customClass: "dgg-tip-msg"
        });
      } else {
        this.new_phase_services({
          orderId: this.transactionItem.id,
          stageName: name
        })
          .then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                message: `添加成功！`,
                type: "success",
                customClass: "dgg-tip-msg"
              });
              this.phaseName = ""; //添加阶段输入框
              this.toPhaseName = false;

              //查询封装的列表接口
              this.commonStageListService();
            } else {
              this.$notify({
                message: `添加失败！`,
                type: "error",
                customClass: "dgg-tip-msg"
              });
            }
          })
          .catch(error => {
            this.$notify({
              message: `添加失败！`,
              type: "error",
              customClass: "dgg-tip-msg"
            });
          });
      }
    },

    //切换阶段名称
    changeTaskListsData(item) {
      console.log(JSON.parse(JSON.stringify(item)), "点击阶段---");
      this.phaseName = ""; //添加阶段输入框
      this.toPhaseName = false;
      this.taskName = ""; //添加任务
      this.toTaskName = false;

      this.chooseStateId = item.stageId;
      this.chooseTaskListId = "";

      //通过阶段id去查询任务
      this.taskAndByStageIdFn(item.stageId);
    },
    // 调用详情数据
    selectDetailDataFn(taskid) {
      this.task_details_service({
        taskId: taskid
      }).then(res => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.taskDetailData = res.data;
            this.defaultTaskDetailItem = res.data;
            //查询详情成功赋值上传附件id
            this.DetailDocumentfileId = `FLSC_${res.data.scOrderId}_TASK_${res.data.taskId}_TASK_ANNEX`;

            this.activeRadioData = 1;
            this.scrollQueryDataFlag = true;
            this.taskDetailQueryType = 1;
            this.DetailQueryInventoryPage = 1;
            this.recordListData = [];
            //查询记录和备注信息
            this.getTaskQueryInentory();

            //如果有选定的时间提醒
            if (
              res.data.taskChangeRecordVoList &&
              res.data.taskChangeRecordVoList.length > 0
            ) {
              this.choosedTimeReminderTime = res.data.taskChangeRecordVoList.map(
                (val, index) => {
                  return val.reminderValue;
                }
              );
            }

            //请求详情附件列表
            this.searchFilesFn();

            //克隆截止时间
            this.clonetDetaildeadLineTime = this.taskDetailData.deadLine;
          });
        } else {
          this.$nextTick(() => {
            this.taskDetailData = {};
          });
        }
      });
    },
    //请求详情附件列表
    searchFilesFn() {
      this.search_files({
        fileId: this.DetailDocumentfileId
      }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          //赋值附件列表数据
          this.DetailDocumentfileLists = res.data;
        } else {
          this.DetailDocumentfileLists = [];
        }
      });
    },
    //添加任务
    addTaskName() {
      this.toPhaseName = false;
      this.toTaskName = true;
      this.$nextTick(() => {
        this.$refs.addTaskInput.$refs.input.focus();
      });
    },
    addTaskNameFn(name) {
      console.log(this.chooseStateId, "选定的阶段id");
      if (!name) {
        this.$notify({
          message: "请输入任务名称！",
          type: "error",
          customClass: "dgg-tip-msg"
        });
      } else {
        this.new_task_service({
          orderId: this.transactionItem.id,
          stageId: this.chooseStateId,
          taskName: name
        })
          .then(res => {
            if (res.code == 200) {
              this.$notify({
                title: "提示",
                message: `添加成功！`,
                type: "success",
                customClass: "dgg-tip-msg"
              });

              //查询封装的列表接口
              this.commonStageListService();

              //通过阶段id去查询任务
              this.taskAndByStageIdFn(this.chooseStateId);
            } else {
              this.$notify({
                message: `添加失败！`,
                type: "error",
                customClass: "dgg-tip-msg"
              });
            }
          })
          .catch(error => {
            this.$notify({
              message: `添加失败！`,
              type: "error",
              customClass: "dgg-tip-msg"
            });
          });
      }
    },
    fileLoadError() {
      this.fileLoading = false;
    },
    async submitModal() {
      this.fileLoading = true;
      await this.$refs["uploadDoc"].$refs["upload-inner"].manualUpload(() => {
        this.fileLoading = false;
        this.docModal = false;
        this.searchFilesFn();
      });
    },
    async onSuccess(res, file) {
      if (this.defaultTaskDetailItem) {
        let _parmas = {
          temType: "caserecode_type_20",
          proId: this.defaultTaskDetailItem.orderId, //生产单id
          proName: this.defaultTaskDetailItem.orderName, //生产单
          stageId: this.defaultTaskDetailItem.stageId, //阶段id
          stageName: this.defaultTaskDetailItem.stageName, //阶段
          taskId: this.defaultTaskDetailItem.taskId, //任务id
          taskName: this.defaultTaskDetailItem.taskName, //任务
          taskUserId: this.defaultTaskDetailItem.taskManagerId, //操作人
          operateName: this.personMsg.userName, //操作人名字
          operateId: this.personMsg.userId, //操作人id
          rmarks: [file.name, file.name, file.name]
        };
        await this.genera_tetemplate(_parmas);
        this.getTaskQueryInentory();
      }
    },
    //作废添加记录
    async invalidDocumentRecords(res, itemfile) {
      console.log(itemfile, "itemfile++++++++++++");
      if (this.defaultTaskDetailItem) {
        let _parmas = {
          temType: "caserecode_type_33",
          proId: this.defaultTaskDetailItem.orderId, //生产单id
          proName: this.defaultTaskDetailItem.orderName, //生产单
          stageId: this.defaultTaskDetailItem.stageId, //阶段id
          stageName: this.defaultTaskDetailItem.stageName, //阶段
          taskId: this.defaultTaskDetailItem.taskId, //任务id
          taskName: this.defaultTaskDetailItem.taskName, //任务
          taskUserId: this.defaultTaskDetailItem.taskManagerId, //操作人
          operateName: this.personMsg.userName, //操作人名字
          operateId: this.personMsg.userId, //操作人id
          rmarks: [itemfile.filename, itemfile.filename, itemfile.filename]
        };
        await this.genera_tetemplate(_parmas);
        this.getTaskQueryInentory();
      }
    }
  }
};
</script>
<style lang="less">
@import "~@/assets/less/main.less"; //引入全局less文件
// 上传附件
.document-upload-modal {
  .el-dialog__headerbtn {
    display: none;
  }
  .el-dialog__header {
    padding: 20px;
    height: 60px;
    .el-dialog__title {
      color: #19233c;
      line-height: 23px;
      font-weight: 550;
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  .el-dialog__body {
    border-top: 1px solid #e3e4e6;
  }
}
.document-upload-demo {
  position: relative;

  .el-upload {
    position: absolute;
    top: -70px;
    right: 0;
  }
  .el-upload-list {
    height: 300px;
    overflow-y: auto;

    .el-upload-list__item {
      margin-top: 10px;
      font-size: 14px;
      .dgg-icon {
        width: 18px !important;
        height: 18px !important;
        vertical-align: middle;
      }
      .el-icon-circle-close {
        top: 2px;
        color: #f10940;
      }
      &:first-child {
        margin-top: 0;
      }
      i {
        font-size: 18px;
      }
    }
  }
}
.transaction-document-head {
  height: 53px;
  line-height: 53px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(25, 35, 60, 1);
  padding-left: 30px;
  border-bottom: 1px solid #e3e4e6;
  .upload-file {
    display: inline-block;
  }
}
.transaction-document-body {
  display: flex;
  height: 600px;
  .transaction-document-body-left {
    width: 200px;
    border-right: 1px solid #edeff0;
    box-sizing: border-box;
    ul {
      li {
        .dgg-icon {
          &:nth-child(2) {
            width: 14px !important;
            height: 14px !important;
          }
        }
      }
    }
  }
  .transaction-document-body-right {
    flex: 1;
    height: 100%;
    .el-table td,
    .el-table th {
      padding: 0 6px;
    }
  }
  .transaction-document-item {
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #edeff0;
    cursor: pointer;
    width: 200px;
    span {
      vertical-align: middle;
    }
  }
  .transaction-document-item:hover {
    background: #f2f4f7;
    color: #10bbb8;
    .transaction-document-icon {
      color: #10bbb8;
    }
  }
  .activeItem {
    background: #f2f4f7;
    color: #10bbb8;
    .transaction-document-icon {
      color: #10bbb8;
    }
  }
}
.up-document {
  color: #10bbb8;
  font-size: 14px;
  font-weight: 400;
  color: rgba(16, 187, 184, 1);
  margin-right: 30px;
  cursor: pointer;
  &:hover {
    color: #18ccc9;
  }
  &:focus {
    color: #0d9391;
  }
}
//指定模板弹窗
.query-template-modal {
  .el-dialog__header {
    overflow: hidden;
    border-bottom: 1px solid #e3e4e6;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-dialog__headerbtn {
    display: none;
  }
  .el-dialog__body {
    padding: 22px 20px !important;
    border-bottom: 1px solid #e3e4e6;
    min-height: 360px;
    > div {
      position: relative;
      min-height: 360px !important;
      .query-search-input {
        width: 270px;
        position: absolute;
        top: -68px;
        right: 0;
        > .el-input__inner {
          background-color: #f0f2f5;
        }
      }
    }
    .taskBitMap {
      min-height: 360px;
      p {
        margin-top: 20px;
      }
    }
  }
  .el-dialog__footer {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0;
    justify-content: flex-end;
    padding-right: 20px;
  }
  .templateLists {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 278px;
      height: 100px;
      margin-right: 22px;
      margin-bottom: 22px;
      border-radius: 4px;
      border: 1px solid #e3e4e6;
      padding: 14px;
      cursor: pointer;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active-this-template {
        border-color: #10bbb8;
        .dgg-icon {
          color: #10bbb8;
        }
      }
      > h6 {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        height: 20px;
        overflow: hidden;
        font-weight: 500;
        color: #19233c;
        .dgg-text-ellip;
        span {
          flex: 1;
        }
        .dgg-icon {
          flex-shrink: 0;
          color: #e3e4e6;
        }
      }
      > p {
        height: 18px;
        font-size: 12px;
        color: #9398a1;
        line-height: 18px;
        .dgg-text-ellip;
        span {
          color: #19233c;
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "~@/assets/less/main.less"; //引入全局less文件
.dgg-order-search {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid #edeff0;
  position: relative;
  z-index: 10;
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  .admin-select-keywords {
    position: absolute;
    width: 270px;
    top: 50%;
    margin-top: 20px;
    z-index: 20;
    background-color: #fff;
    max-height: 300px;
    overflow: scroll;
    box-shadow: 0px 1px 8px 0px rgba(97, 112, 136, 0.1);
    li {
      line-height: 30px;
      .dgg-text-ellip;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        color: #10bbb8;
      }
    }
  }
}
.breadcrumb-page-keep {
  min-height: calc(100% - 124px);
  background: #fff;
}
.taskComponent {
  background-color: #fff;
  position: absolute;
  height: calc(100% - 36px);
  position: absolute;
  width: 100%;
  .dgg-no-task {
    height: calc(100% - 70px);
  }
  .dgg-task-warp {
    height: calc(100% - 48px);
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    text-align: center;
    background-color: #fff;
    margin-bottom: 36px;
    border-radius: 6px;
    .add-stage {
      padding: 0 8px;
      height: 46px;
      line-height: 46px;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      .brabBill-button {
        height: 100%;
        width: 100%;
        border: 0;
        font-size: 14px;
        font-weight: 400;
        &.is-disabled {
          background-color: transparent;
        }

        border-top: 1px solid #edeff0;
        span {
          margin-left: 3px;
        }
      }
    }
    .dgg-stage {
      flex-shrink: 0;
      width: 250px;
      border-right: 1px solid #edeff0;
      .stage-content {
        height: calc(100% - 20px);
        overflow-y: scroll;
        padding: 8px;
        .stage-lists {
          .current-stage {
            height: 36px;
            text-align: left;
            margin-bottom: 16px;

            &.chooseIdActive {
              background-color: #f0f2f5;
            }
            &.chooseIdFocusActive {
              background-color: transparent;
              &:hover {
                background-color: transparent;
              }
            }

            .detail {
              overflow: hidden;
              height: 100%;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              padding: 0 12px 0 22px;
              &:hover {
                background-color: #f0f2f5;
                .dgg-task-btn {
                  line-height: 100%;
                  & > span {
                    display: inline-block;
                  }
                }
              }
              & > p {
                flex: 1;
                max-width: 145px;
                overflow: hidden;
                font-size: 14px;
                font-weight: 400;
                color: #9398a1;
                line-height: 20px;
                & > span {
                  font-size: 14px;
                  font-weight: 500;
                  color: #19233c;
                  display: inline-block;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  white-space: nowrap;
                  just-content: flex-start;
                  span {
                    display: inline-block;
                    max-width: 90px;
                    .dgg-text-ellip;
                    flex-shrik: 0;
                  }
                  label {
                    display: inline-block;
                    flex: 1;
                    .dgg-text-ellip;
                  }
                }
              }
              .dgg-task-btn {
                flex-shrink: 0;
                font-size: 0;
                & > span {
                  display: none;
                  height: 100%;
                  font-size: 0;
                }
                .dgg-icon:last-child {
                  margin-left: 10px;
                }
              }
            }
            .detail-isedit {
              overflow: hidden;
              height: 100%;
              display: flex;
              flex-wrap: nowrap;
              align-items: center;
              cursor: pointer;
              padding: 0 12px 0 22px;
              &:hover {
                .dgg-task-btn {
                  line-height: 100%;
                  & > span {
                    display: inline-block;
                  }
                }
              }
            }
          }
        }
      }
      &.hidden-dgg-stage {
        .stage-content {
          /*height: 100%;*/
          .stage-lists {
            .current-stage {
              .detail {
                & > p {
                  max-width: 100%;
                }
              }
            }
          }
        }
      }
    }
    .dgg-task {
      height: 100%;
      flex-shrink: 0;
      width: 300px;
      border-right: 1px solid #edeff0;
      .task-content {
        height: calc(100% - 20px);

        overflow-y: scroll;
        padding: 0 8px;
        .task-lists {
          height: 100%;
          .current-list {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            height: 80px;
            overflow: hidden;
            border-bottom: 1px solid #edeff0;
            padding: 8px 0;
            &:last-child {
              border-bottom: 0;
            }
            &.taskIdActive {
              .content {
                background-color: #f0f2f5;
              }
            }
            &:hover {
              .content {
                background-color: #f0f2f5;
              }
            }
            .content {
              width: 100%;
              height: 100%;
              padding: 0 22px;
              overflow: hidden;
              word-break: break-all;
              word-wrap: break-word;
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-wrap: nowrap;
              .top-title {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;
                overflow: hidden;
                cursor: pointer;
                .list-group {
                  flex: 1;
                  display: flex;
                  flex-wrap: nowrap;
                  justify-content: center;
                  align-items: center;
                  height: 20px;
                  .el-checkbox {
                    flex-shrink: 0;
                    margin-right: 10px;
                    margin-top: -2px;
                    .el-checkbox__input {
                      vertical-align: middle;
                      margin-top: 0;
                    }
                  }
                  .list-title {
                    flex: 1;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    height: 20px;
                    .el-tag {
                      height: 18px;
                      border-radius: 10px;
                      font-size: 12px;
                      line-height: 16px;
                      font-weight: 400;
                      background-color: transparent;
                      margin-right: 5px;
                      flex-shrink: 0;
                      max-width: 70px;
                      text-align: center;
                      .dgg-text-ellip;
                      &.due-tag {
                        color: #fd8e26;
                        border-color: #fd8e26;
                      }
                      &.overdue-tag {
                        color: #f10940;
                        border-color: #f10940;
                      }
                    }
                    & > h6 {
                      height: 100%;
                      text-align: left;
                      font-weight: 550;
                      color: #19233c;
                      line-height: 20px;
                      .dgg-text-ellip;
                      font-size: 14px;
                      &.deleteLine {
                        text-decoration: line-through;
                        color: #9398a1;
                      }
                    }
                    & > .dgg-icon {
                      margin-left: 4px;
                      flex-shrink: 0;
                    }
                  }
                }
                .list-des {
                  text-indent: 24px;
                  font-size: 13px;
                  color: #9398a1;
                  line-height: 18px;
                  margin-top: 7px;
                  text-align: left;
                  .dgg-text-ellip;
                }
              }

              .headimg {
                flex-shrink: 0;
                width: 27px;
                height: 27px;
                border-radius: 50%;
              }
            }
          }
        }
      }
      &.hidden-dgg-task {
        .task-content {
          /*height: 100%;*/
        }
      }
    }
    .dgg-details {
      height: 100%;
      // height: calc(100% - 46px);
      flex-shrink: 0;
      width: 630px;
      border-right: 1px solid #edeff0;
      overflow-y: scroll;
      .detail-content {
        text-align: left;
        .user-info {
          height: 90px;
          border-bottom: 1px solid #edeff0;
          overflow: hidden;
          padding: 18px 12px 0 21px;
          .name {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            & > h6 {
              flex: 1;
              .dgg-text-ellip;
              text-align: left;
              font-size: 16px;
              color: #19233c;
              line-height: 22px;
              font-weight: 550;
            }
            & > span {
              display: inline-block;
              height: 22px;
              flex-shrink: 0;
              font-size: 0;
              display: flex;
              align-items: center;
              .dgg-icon {
                cursor: pointer;
                &:hover,
                &:focus {
                  color: #10bbb8;
                }
                &:last-child {
                  margin-left: 10px;
                }
              }
            }
          }
          .date {
            display: flex;
            flex-wrap: nowrap;
            margin-top: 12px;
            font-size: 14px;
            font-weight: 400;
            color: #666873;
            line-height: 20px;
            & > p {
              .dgg-text-ellip;
              max-width: calc(100% - 220px);
            }
            & > span {
              .dgg-text-ellip;
              max-width: 220px;
              flex-shrink: 0;
              margin-left: 27px;
            }
          }
        }
        .transactor {
          height: 40px;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          padding: 0 30px;
          margin-bottom: 4px;
          position: relative;

          &.transactor-people {
            margin-top: 10px;
            & > .dgg-icon {
              &:last-child {
                cursor: pointer;
                &.dgg-not-allowed {
                  cursor: not-allowed;
                }
              }
            }
            .show-transactor-people {
              display: inline-block;
              width: 26px;
              height: 26px;
              position: relative;
              font-size: 0;
              &:hover {
                .dgg-icon {
                  display: inline;
                }
              }
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                position: relative;
              }
              .dgg-icon {
                display: none;
                position: absolute;
                top: -2px;
                right: -8px;
                cursor: pointer;
              }
            }
          }

          .addTransactor {
            color: #c8cfdb;
          }

          .addTransactor:hover {
            color: #dae0eb;
          }

          .remind-form {
            padding: 0 10px 0 30px;
            width: 280px;
          }

          .transactor-type {
            display: inline-block;
            margin-left: 13px;
            width: 100px;
            color: #666873;
            font-size: 14px;
            &.task-misson-statement:hover {
              cursor: pointer;
              color: #10bbb8;
            }
            .dgg-text-ellip;
          }

          & > .dgg-button {
            padding: 7px 0;
            border-color: transparent;
            &.is-disabled {
              background-color: transparent;
              cursor: not-allowed;
            }
          }
        }
        // 添加任务说明
        .add-transactor {
          padding: 0 30px;
          .remarksTextArea {
            .el-textarea__inner {
              min-height: 80px !important;
            }
          }
        }
        .transactor-remind {
          margin: -10px 0 10px;

          .remindDelete {
            cursor: pointer;
          }
        }

        .task-explain-text {
          text-align: center;

          .explain-content {
            text-align: left;
            padding: 0 20px 0 60px;
            overflow: hidden;
            word-break: break-all;
            word-wrap: break-word;
            color: #9398a1;
            font-size: 14px;
          }

          .dgg-button {
            margin-top: 12px;
            border-color: transparent;
            color: #666873;

            &:hover {
              color: #10bbb8;
            }

            .dgg-icon {
              float: right;
              margin-left: 4px;
            }
          }
        }

        .remarks {
          border-top: 1px solid #edeff0;
          padding: 10px 30px 30px;

          .transactor {
            padding: 0;
            .dgg-icon {
              color: #666873;
            }
          }

          .dgg-radio-group {
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            margin-top: 30px;

            /deep/ .el-radio-button {
              width: auto;
            }

            /deep/.el-radio-button__inner {
              background-color: transparent;
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              padding: 0;
              border: 0;
              width: 30px;
              text-align: center;
              font-weight: 400;
              color: #666873;

              &:hover {
                color: #10bbb8;
              }
            }
            /deep/.el-radio-button__orig-radio:checked
              + .el-radio-button__inner {
              box-shadow: none !important;
              color: #10bbb8;
            }
          }

          .remarksTextArea {
            .el-textarea__inner {
              min-height: 80px !important;
            }
          }

          .sava-remarks {
            margin-top: 12px;
            background-color: #88dedc;
            border-color: #88dedc;
            color: #fff;
            font-size: 12px;
            &.active-save-remarks {
              background-color: #10bbb8;
              border-color: #10bbb8;
            }
          }

          .record-lists {
            padding-top: 30px;

            .current-list {
              display: flex;
              flex-wrap: nowrap;
              padding-bottom: 28px;
              &:last-child {
                padding-bottom: 0;
              }

              .headimg {
                width: 27px;
                height: 27px;
                border-radius: 50%;
                flex-shrink: 0;
                margin-right: 14px;
              }

              .content {
                flex: 1;

                .name-date {
                  display: flex;
                  align-items: center;
                  color: #19233c;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 20px;

                  span {
                    &.name {
                      .dgg-text-ellip;
                    }

                    &.date {
                      font-size: 13px;
                      color: #9398a1;
                      // max-width: 125px;
                      flex-shrink: 0;
                      margin-left: 8px;
                    }
                  }
                }

                .desc {
                  font-size: 14px;
                  font-weight: 400;
                  color: #666873;
                  line-height: 20px;
                  margin-top: 10px;
                  word-break: break-all;
                  word-wrap: break-word;
                }
              }
            }
          }

          .no-remarks {
            font-size: 13px;
            font-weight: 400;
            color: #9398a1;
            line-height: 18px;
            .dgg-text-ellip;
            text-align: center;
            margin-top: 20px;
          }
        }
      }

      .transactor-pop {
        width: 314px;
        height: 343px;
        background: #fff;
        box-shadow: 0px 2px 19px 5px rgba(218, 221, 230, 1);
        border-radius: 4px;
        position: absolute;
        right: 145px;
        top: 195px;
        z-index: 55;

        .tab-top {
          width: 100%;

          span {
            display: inline-block;
            width: 50%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #666873;
            font-weight: 500;
            border-bottom: 2px solid #e3e4e6;
            cursor: pointer;
          }

          .this-btn,
          span:hover {
            color: #10bbb8;
            border-color: #10bbb8;
          }
        }

        .tab-content {
          padding-bottom: 20px;
        }

        .infinite-list {
          padding: 0 15px;
          max-height: 245px;

          > li {
            cursor: pointer;
            width: 100%;
            font-size: 14px;
            color: #19233c;
            line-height: 20px;
            margin: 0 0 20px;
            span:first-child {
              padding-right: 80px;
            }
          }
        }
      }
    }

    .add-stage-input {
      .el-input__inner {
        text-align: center;
        border-color: #10bbb8;
      }
    }
  }
}

.finishImg {
  top: -20px;
  right: 180px;
  position: absolute;
  z-index: 100;
  background: url("~assets/images/icon_chapter_red.png") no-repeat;
  background-size: 100% 100%;
  width: 127px;
  height: 50px;
  padding: 5px;
  color: #f10940;
  text-align: center;
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg); /* IE 9 */
  -moz-transform: rotate(-30deg); /* Firefox */
  -webkit-transform: rotate(-30deg); /* Safari 和 Chrome */
  -o-transform: rotate(-30deg); /* Opera */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px;
  overflow: hidden;
  &.back-order-seal-active {
    background: url("~assets/images/icon_chapter_grey_back.png") no-repeat;
    background-size: 100% 100%;
    color: #d0d0d0;
  }
  .finishImg-time {
    font-size: 12px;
    font-weight: 400;
    font-size: 12px;
    font-weight: 400;
    height: 20px;
    line-height: 20px;
    .dgg-text-ellip;
    padding: 0 10px;
  }
  .finishImg-title {
    font-size: 18px;
    font-weight: 500;
    height: 24px;
    line-height: 24px;
    .dgg-text-ellip;
    padding: 0 20px;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
}

//修改截止时间值
/deep/.chage-deadline-time {
  width: 160px;
  cursor: pointer;
  .el-date-editor {
    width: 100%;
    cursor: pointer;
  }
  .el-input__prefix {
    display: none;
    z-index: -1 !important;
  }
  .el-input__prefix {
    display: none;
    z-index: -1 !important;
  }
  .el-input__inner {
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    border: 0;
    position: relative;
  }
  .is-disabled.el-input {
    background-color: transparent;
    .el-input__inner {
      background-color: transparent;
      cursor: not-allowed;
    }
  }
}

//附件显示
.show-detail-filesList {
  padding-left: 60px;
  padding-right: 30px;
  ul {
    width: 100%;
    li {
      overflow: hidden;
      line-height: 26px !important;
      box-sizing: border-box;
      margin-bottom: 14px;

      .icon-name {
        display: flex;
        align-items: center;
        p {
          margin-left: 14px;
          .dgg-text-ellip;
          max-width: 180px;
        }
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
      .dgg-button-group {
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        flex: 1;
        overflow: hidden;
        text-align: right;
        display: none;
        .dgg-button {
          line-height: 26px;
          padding: 0 12px;
          border: 0;
          border-radius: 4px;
          margin-left: 4px;
          &.braBill-button-disabled {
            cursor: not-allowed;
          }
          &:hover {
            background-color: #e7f7f7;
          }
        }
      }

      &:hover {
        .icon-name {
          .dgg-icon {
            color: #10bbb8;
          }
          p {
            color: #10bbb8;
          }
        }
        .dgg-button-group {
          display: flex;
        }
      }
    }
  }
}
//图片预览
.el-image {
  &.fileimg {
    z-index: 5000;
    .el-image-viewer__wrapper {
      z-index: 6000;
      .el-image-viewer__close {
        background-color: #fff;
        z-index: 7000;
      }
    }
  }
}
</style>
